<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-button v-for="item in iconNameList" :key="item" style="padding: 8px 10px;margin: 4px 5px" size="small" type="danger" :title="item">
          <svg-icon :icon-class="item" />
        </el-button>
      </el-col>
      <el-col :span="12">
        <svg-icon v-for="item in iconNameList" :key="item" :icon-class="item" style="padding: 8px 10px;margin: 4px 5px" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'icons',
  data() {
    return {
      iconNameList: []
    }
  },
  computed: {
  },
  mounted() {
    const svgs = require.context('@/icons/svg', false, /\.svg$/)
    svgs.keys().forEach(key => {
      this.iconNameList.push(key.replace(/(\.\/|\.svg)/g, ''))
    })
  }
}
</script>

<style>

</style>
